<template>
  <div>
    <van-cell
      icon="search"
      v-for="(item, index) in suggestionList"
      :key="index"
      @click="$emit('keywordFn', item)"
    >
      <template #title>
        <div v-html="textHtml(item)"></div>
      </template>
    </van-cell>
  </div>
</template>
<script>
import { searchSuggestionApi } from "@/api/home";
import lodash from "lodash";
export default {
  props: {
    searchvalue: String,
  },
  data() {
    return {
      times: "",
      suggestionList: [],
    };
  },
  created() {},
  watch: {
    searchvalue: {
      immediate: true, //进入界面之后就执行一次监听
      //使用ludash 工具库实现防抖节流让她等待两秒后进行请求搜索
      handler: lodash.debounce(async function (newVal) {
        try {
          let { data } = await searchSuggestionApi(newVal);
          if (data.data.options[0] != null) {
            this.suggestionList = data.data.options;
          }
        } catch (error) {
          console.log(error);
        }
      }, 500),
    },
  },
  methods: {
    textHtml(val) {
      //使用正则表达式 使用接收到的参数 来判断 用户输入的参数 和  返回的参数 匹配的字符是否 一样 如果一样就把颜色变红
      // return val.replace(
      //   /``/gi`<span style="color :red">${this.searchvalue}</span>`
      // );
      let hightStr = `<span style="color :red">${this.searchvalue}</span>`;
      //因为/不能写变量/ 里面不能使用 this. 所以需要根据变量来创建正则表达式
      // regexp （匹配模式的字符串，匹配模式的规则）
      // this.searchvalue 就是搜索框输入的字符串 gi 就是全局匹配 不区分大小写
      let res = new RegExp(this.searchvalue, "gi");
      //VAL 是创建好的匹配规则  通过匹配替换掉原来的 使用 上面的hightStr  已经加红好的，然后给这个加红
      return val.replace(res, hightStr);
    },
  },
};
</script>
<style scoped></style>
